<template>
    <div class='takeaddress-container'>
        <div class="main-container">
            <div class="m-c-headtip">
                收货地址
            </div>
            <div class="m-c-edittip">
                <span>
                    编辑收货地址
                </span>
            </div>
            <!-- 切换国家 -->
            <div class="country">
                <div>
                    <span>
                        当前配送至
                    </span>
                </div>
                <div>
                    <span>
                        {{ country }}
                    </span>
                </div>
                <div>
                    <span @click="() => {
                        this.$message({
                            type: 'warning',
                            message: '暂只支持中国大陆'
                        })
                    }">切换></span>
                </div>
            </div>
            <!-- 选择地址 -->
            <div class="address-info">
                <div>
                    <div class="ad-infotip">
                        <span>地址信息: </span>
                    </div>
                    <div class="address-list">
                        <span>
                            <p v-if="showData.province == ''">请选择省/市/县(区)</p>
                            <span v-if="showData.province != ''">{{ showData.province + '/' }}</span>
                            <span v-if="showData.city != ''">{{ showData.city + '/' }}</span>
                            <span v-if="showData.county != ''">{{ showData.county + '/' }}</span>
                        </span>
                        <i class="el-icon-arrow-down"></i>
                    </div>
                    <div class="sharea">
                        <div class="sharea-head">
                            <ul>
                                <li tabindex="1" :class="showStatus.province ? 'bgc-color' : ''" @click="choseProvince()">省
                                </li>
                                <li tabindex="1" :class="showStatus.city ? 'bgc-color' : ''" @click="choseCity()">市</li>
                                <li tabindex="1" :class="showStatus.county ? 'bgc-color' : ''" @click="choseCounty()">区(县)
                                </li>
                            </ul>
                        </div>
                        <div class="sharea-body">
                            <ul>
                                <li tabindex="1" v-if="showStatus.province" v-for="province in showSharea.province"
                                    @click="setProvince(province.name)">
                                    {{ province.name }}
                                </li>
                                <li tabindex="1" v-if="showStatus.city" v-for="city in showSharea.city"
                                    @click="setCity(city.name)">
                                    {{ city.name }}
                                </li>
                                <li tabindex="1" v-if="showStatus.county" v-for="county in showSharea.county"
                                    @click="setCounty(county.name)">
                                    {{ county.name }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 填写详细地址 -->
            <div class="detail-address">
                <div>
                    <div class="de-addresstip">
                        <span>详细地址: </span>
                    </div>
                    <div class="de-address-container">
                        <textarea v-model="addressVo.detailAddress" rows="2" cols="20"
                            placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></textarea>
                    </div>
                </div>
            </div>
            <div class="error-msg">
                <span>详细地址长度需要在5-120个汉字或字符，不能包含表情符号</span>
            </div>

            <!-- 邮政编码 -->
            <div class="zip-code">
                <div class="zip-codetip">
                    <span>邮政编码: </span>
                </div>
                <div>
                    <input v-model="addressVo.postCode" type="text" placeholder="请填写邮编">
                </div>
            </div>

            <!-- 收货人姓名 -->
            <div class="zip-code">
                <div class="re-name">
                    <span>收货人姓名: </span>
                </div>
                <div style="m">
                    <input v-model="addressVo.name" type="text" placeholder="长度不超过2-25个字符，不能包含特殊字符">
                </div>
            </div>

            <!-- 手机号码 -->
            <div class="recover-mobile">
                <div>
                    <div class="mobiletip">
                        <span>手机号码: </span>
                    </div>
                    <div class="mobile-choose">
                        <span @click="() => {
                            this.$message({
                                type: 'warning',
                                message: '暂只支持中国大陆'
                            })
                        }">
                            中国大陆 +86
                        </span>
                        <i class="el-icon-arrow-down"></i>
                    </div>
                    <div class="mobile-info">
                        <input v-model="addressVo.phone" type="text" placeholder="通讯号码" @change="checkPhone()">
                    </div>
                </div>
            </div>

            <!-- 是否是默认地址 -->
            <div class="default-address">
                <label>
                    <input type="checkbox" v-model="checkDefault" :checked="checkDefault">
                    设置为默认地址
                </label>
            </div>
            <!-- 保存 -->
            <div class="save-address">
                <span @click="saveAddress()">{{ saveOrUpdateTip }}</span>
            </div>

            <!-- 地址条数提示 -->
            <div class="address-total">
                <i class="el-icon-warning-outline"></i>
                <span>
                    已保存{{ addLen }}了条地址，还能保存{{ 20 - addLen }}条地址
                </span>
            </div>

            <!-- 地址详细信息显示 -->
            <div class="all-address-info">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <div>收货人</div>
                            </th>
                            <th>
                                <div>所在地区</div>
                            </th>
                            <th>
                                <div>详细地址</div>
                            </th>
                            <th>
                                <div>邮编</div>
                            </th>
                            <th>
                                <div>通讯号码</div>
                            </th>
                            <th>
                                <div>操作</div>
                            </th>
                            <th>
                                <div></div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 循环赋值 -->
                        <tr v-for="address in addressDo">
                            <td>
                                <div>{{ address.name }}</div>
                            </td>
                            <td>
                                <div>{{ address.province + ' ' + address.city + ' ' + address.region }}</div>
                            </td>
                            <td>
                                <div>{{ address.detailAddress }}</div>
                            </td>
                            <td>
                                <div>{{ address.postCode }}</div>
                            </td>
                            <td>
                                <div>{{ '86-' + address.phone }}</div>
                            </td>
                            <td class="update-delete">
                                <div>
                                    <span class="all-hover" @click="updateAddress(address)">修改</span>
                                    <span>&nbsp;|&nbsp;</span>
                                    <span class="all-hover" @click="deleteAddress(address.id)">删除</span>
                                </div>
                            </td>
                            <td class="set-default">
                                <div>
                                    <span :class="address.defaultStatus == 1 ? 'this-default-address' : 'all-hover'"
                                        @click="setDefault(address)">
                                        {{ address.defaultStatus == 1 ? '默认地址' : '设为默认' }}
                                    </span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
// 导入组件
import { isMobile } from "../../utils/validate"
// 导出模块
export default {
    // 模块名字
    name: 'takeaddress',
    // 模块数据
    data() {
        //数据
        return {
            country: '中国大陆',
            sharea: [],
            showData: {
                province: '',
                city: '',
                county: ''
            },
            showSharea: {
                province: [],  // 省份
                city: [],   // 市
                county: []  // 县
            },
            showStatus: {
                province: false,
                city: false,
                county: false
            },
            addressVo: {   // 提交的数据
                id: '',   // 地址id
                memberId: '',  // 绑定的会员id
                name: '',  // 收货人姓名
                phone: '',  // 收货人电话
                postCode: '',  // 邮政编码
                province: '', // 省份
                city: '',  // 城市
                region: '',  // 区（县）
                detailAddress: '',  // 详细地址
                areacode: '',  // 省市区代码
                defaultStatus: 0
            },
            addressDo: [], // 获取的数据,
            addLen: 0,  // 当前地址条数
            saveOrUpdate: true,   // true就是保存数据
            saveOrUpdateTip: '保存',

            checkDefault: false,   // 默认为不是默认地址
            memberVo: null,

        };
    },
    // 注册组件
    components: {
    },
    methods: {

        // 设置该地址为默认地址
        setDefault(address) {
            // 添加数据
            this.addressVo = address
            this.addressVo.defaultStatus = 1
            // 进行修改
            this.$http({
                url: this.$http.adornUrl("/shitou-member/shitoumember/memberreceiveaddress/setDefaultAddress"),
                method: 'post',
                data: this.$http.adornData(this.addressVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '设置默认地址成功'
                    })
                    this.format()
                    this.getMemberAllAddress()
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            });

        },

        // 删除地址数据
        deleteAddress(addressId) {
            this.addressVo.id = addressId
            this.$http({
                url: this.$http.adornUrl("/shitou-member/shitoumember/memberreceiveaddress/deleteAddress"),
                method: 'post',
                data: this.$http.adornData(this.addressVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除地址成功'
                    })
                    this.format()
                    this.getMemberAllAddress()
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


        // 更新数据
        updateAddress(address) {
            // this.$router.go(0)
            this.addressVo = address
            // 设置省市区
            this.setProvince(address.province)
            this.setCity(address.city)
            this.setCounty(address.region)
            // 选择展开
            this.choseCounty()
            // 设置修改配置
            this.saveOrUpdate = false;
            this.saveOrUpdateTip = '修改'
        },

        // 数据格式化
        format() {
            this.addressVoid = ''
            this.addressVo.memberId = ''
            this.addressVo.name = ''
            this.addressVo.phone = ''
            this.addressVo.postCode = ''
            this.addressVo.province = ''
            this.addressVo.city = ''
            this.addressVo.region = ''
            this.addressVo.detailAddress = ''
            this.addressVo.areacode = ''
            this.addressVo.defaultStatus = 0

            this.showData.province = this.showData.city = this.showData.county = ''
            this.showSharea.province = this.showSharea.city = this.showSharea.county = []

            this.choseProvince()

            this.saveOrUpdate = true
            this.saveOrUpdateTip = '保存'
        },

        // 检查号码是否合格
        checkPhone() {
            if (!isMobile(this.addressVo.phone)) {
                this.$message({
                    type: 'warning',
                    message: '号码格式不对'
                })
                return false
            }
            return true;
        },


        // 保存地址
        saveAddress() {
            // 数据校验
            if (this.addressVo.province == '' ||
                this.addressVo.city == '' || this.addressVo.region == '') {
                this.$message({
                    type: 'warning',
                    message: '请选择省市区'
                })
                return;
            }
            if (this.addressVo.detailAddress == '') {
                this.$message({
                    type: 'warning',
                    message: '请所处填写详细地址'
                })
                return;
            }
            if (this.addressVo.name == '') {
                this.$message({
                    type: 'warning',
                    message: '请填写收货人姓名'
                })
                return;
            }
            if (this.addressVo.phone == '') {
                this.$message({
                    type: 'warning',
                    message: '请填写收货人通讯号码'
                })
                return;
            }
            if (!this.checkPhone()) {
                return;
            }

            // 提交数据
            this.submitAddress();
        },


        // 提交数据
        submitAddress() {
            if (this.addLen >= 20) {
                this.$message({
                    type: 'warning',
                    message: '当前地址已满，请清理不常用地址'
                })
                return;
            }
            // 设置默认邮编
            if (this.addressVo.postCode == '') {
                this.addressVo.postCode = '000000'
            }
            // 获取会员用户id
            this.addressVo.memberId = this.memberVo.id

            // 获取areacode
            this.getAreaCode()
            // 判断是否是默认地址
            this.checkDefaultAddress()

            console.log(this.addressVo)
            // 请求后端
            this.$http({
                url: this.$http.adornUrl(this.saveOrUpdate ?
                    "/shitou-member/shitoumember/memberreceiveaddress/add/address" :
                    "/shitou-member/shitoumember/memberreceiveaddress/updateAddress"),
                method: 'post',
                data: this.$http.adornData(this.addressVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    // 重新获取地址数据
                    this.getMemberAllAddress();
                    // 重新初始化数据
                    this.$message({
                        type: 'success',
                        message: this.saveOrUpdate ? '添加地址成功' : '修改地址成功'
                    })
                } else {
                    this.$message({
                        type: 'warning',
                        message: this.saveOrUpdate ? '添加地址失败' : '修改地址失败'
                    })
                }
                this.format()
            })
        },


        // 复选框判断是否是默认地址
        checkDefaultAddress() {
            if (this.checkDefault) {
                this.addressVo.defaultStatus = 1;
            } else {
                // ..
            }
        },


        // 获取areacode
        getAreaCode() {
            if (this.addressVo.areacode == '') {
                let length_ = this.sharea.length;
                for (let i = 0; i < length_; i++) {
                    if (this.sharea[i].name == this.showData.province) {
                        let son = this.sharea[i].shAreaChildren
                        for (let j = 0; j < son.length; j++) {
                            if (son[j].name == this.showData.city) {
                                this.addressVo.areacode = son[j].code;
                                break;
                            }
                        }
                        break;
                    }
                }
            }
        },


        // 设置省份
        setProvince(name) {
            // 每次设置省份就需要清除市和县的数据
            this.showData.province = name;
            this.showData.city = '';
            this.showData.county = '';
            this.choseCity();
            this.addressVo.province = name;
        },

        // 设置市
        setCity(name) {
            // 设置市需要清除县的数据
            this.showData.city = name;
            this.showData.county = ''
            this.choseCounty();
            this.addressVo.city = name;
        },

        // 设置县城
        setCounty(name) {
            this.showData.county = name;
            this.addressVo.region = name;
        },


        // 选择设置展开省份
        choseProvince() {
            // 设置省份数据
            this.showSharea.province = this.sharea;
            // 设置是否展示
            this.showStatus.province = true;
            // 关闭其他的
            this.showStatus.city = false;
            this.showStatus.county = false;
        },

        // 选择设置展开市区
        choseCity() {
            // 确保获取了省份
            if (this.showData.province == '') {

                this.$message({
                    type: 'warning',
                    message: '请先选择省份'
                })
                return;
            }
            // 设置省份展示关闭
            this.showStatus.province = false;
            // 获取数据并设置数据
            let provinceLen = this.showSharea.province.length
            for (let i = 0; i < provinceLen; i++) {
                if (this.showSharea.province[i].name == this.showData.province) {
                    this.showSharea.city = this.sharea[i].shAreaChildren
                }
            }
            // 设置市展示
            this.showStatus.city = true;
        },

        //选择展开县区
        choseCounty() {
            // 确保获取了省份和市
            if (this.showData.province == '' || this.showData.city == '') {
                this.$message({
                    type: 'warning',
                    message: '请先选择省份或市'
                })
                return;
            }
            // 关闭省份和市
            this.showStatus.province = false
            this.showStatus.city = false;

            // 从市中获取数据并设置数据
            let cityLen = this.showSharea.city.length;
            for (let i = 0; i < cityLen; i++) {
                if (this.showData.city == this.showSharea.city[i].name) {
                    this.showSharea.county = this.showSharea.city[i].shAreaChildren
                }
            }
            // 展开设置
            this.showStatus.county = true;

        },

        // 获取全国省市县
        getShArea() {
            // 从本地缓存获取
            let sharea = JSON.parse(localStorage.getItem("sharea"));
            if (sharea !== null) {
                this.sharea = sharea;
                return;
            }
            // 缓存中没有，就请求
            this.$http({
                url: this.$http.adornUrl("/shitou-warehouse/shitouwarehouse/sharea/treeList"),
                method: 'get'
            }).then(({ data }) => {
                if (data.code == 200) {
                    // 缓存到本地
                    localStorage.setItem("sharea", JSON.stringify(data.data));
                    this.sharea = data.data;
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },

        // 获取会员地址
        async getMemberAllAddress() {
            this.addressVo.memberId = this.memberVo.id
            this.$http({
                url: this.$http.adornUrl("/shitou-member/shitoumember/memberreceiveaddress/memberAddress"),
                method: 'post',
                data: this.$http.adornData(this.addressVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    // do
                    this.addressDo = data.data;
                    this.addLen = this.addressDo.length;
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        }

    },
    async created() {
        let member = await this.$memberInfo()
        if (member !== null) {
            this.memberVo = member
        }
        this.getShArea();
        this.choseProvince();
        this.getMemberAllAddress()
    }
}
</script>
<style scoped>
@import url("../../utils/css/takeaddress.css");
</style>

